<!--
 * @Author: atdow
 * @Date: 2021-07-14 22:03:09
 * @LastEditors: null
 * @LastEditTime: 2021-07-21 10:40:02
 * @Description: file description
-->
<template>
    <el-row class="application-mine-create">
        <el-col>
            <div class="tree-title">
                <span>接口限流列表</span>
                <el-button plain
                    class="m20"
                    type="primary"
                    size="mini"
                    icon="el-icon-plus"
                    @click="onCreate"
                    style="margin-right:5px"
                    >新增限流规则</el-button
                >
                <el-popconfirm
                    title="确定要批量暂停规则吗？"
                    @confirm="confirmChangeMutiStatus(false)"
                    style="margin-right:5px"
                >
                    <el-button plain  slot="reference" size="mini" type="primary"
                        >批量暂停</el-button
                    >
                </el-popconfirm>
                <el-popconfirm
                    title="确定要批量开启规则吗？"
                    @confirm="confirmChangeMutiStatus(true)"
                >
                    <el-button  plain slot="reference" size="mini" type="primary"
                        >批量开启</el-button
                    >
                </el-popconfirm>
            </div>
            <el-table
                ref="tableRef"
                v-loading="loading"
                :data="tableList"
                :max-height="mapHeight"
                border
                @selection-change="handleSelectionChange"
            >
                <!-- <el-table-column type="index"></el-table-column> -->
                <el-table-column
                    label="序号"
                    type="selection"
                    width="50"
                    align="center"
                    sortable
                />
                <el-table-column
                    label="规则名称"
                    prop="ruleName"
                    align="center"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    label="接口服务数量"
                    prop="apiNum"
                    show-overflow-tooltip
                    align="center"
                >
                    <template slot-scope="scope">
                        <p class="apiNum" @click="onApiNum(scope.row)">
                            {{ scope.row.apiNum || "-" }}
                        </p>
                    </template>
                </el-table-column>
                <el-table-column
                    label="规则创建时间"
                    prop="createTime"
                    show-overflow-tooltip
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    label="规则详情"
                    prop="ruleDetails"
                    align="center"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        {{ scope.row.ruleDetails || "-" }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="规则状态"
                    prop="status"
                    align="center"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        {{
                            scope.row.status === 0
                                ? "禁用"
                                : scope.row.status === 1
                                ? "启用"
                                : "-"
                        }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="规则创建人"
                    prop="createBy"
                    align="center"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    label="规则说明"
                    prop="ruleDescription"
                    align="center"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button plain
                            style="margin-right:5px"
                            @click="onEdit(scope.row)"
                            type="text"
                            size="mini"
                            >修改</el-button
                        >
                        <el-popconfirm
                            v-if="scope.row.status === 1"
                            title="确定要暂停该规则吗？"
                            @confirm="confirmChangeSingleStatus(scope.row)"
                        >
                            <el-button plain
                                slot="reference"
                                size="mini"
                                type="text"
                                >暂停</el-button
                            >
                        </el-popconfirm>
                        <el-popconfirm
                            v-if="scope.row.status === 0"
                            title="确定要开启该规则吗？"
                            @confirm="confirmChangeSingleStatus(scope.row)"
                        >
                            <el-button plain
                                slot="reference"
                                size="mini"
                                type="text"
                                >开启</el-button
                            >
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                v-show="totalNum > 0"
                :total="totalNum"
                :page.sync="ruleForm.pageNum"
                :limit.sync="ruleForm.pageSize"
                @pagination="fetchData"
            ></pagination>
        </el-col>
        <ApiNumModal ref="ApiNumModalRef" />
    </el-row>
</template>

<script>
import { getHeight } from "@/utils/zkComm";
import {
    getThrottlingList,
    editLimitingStatus
} from "@/api/dataService/serviceMonitor/throttlingList";

import ApiNumModal from "./ApiNumModal.vue";

export default {
    name: "applicationMineCreated",
    props: {
        form: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    components: {
        ApiNumModal
    },
    data() {
        return {
            loading: false,
            ruleForm: {
                pageNum: 1,
                pageSize: 30,
                viewType: 1
            },
            tableList: [],
            totalNum: 0,
            mapHeight: undefined,
            selectionList: []
        };
    },
    computed: {
        mergerRuleForm() {
            return Object.assign({}, this.ruleForm, this.form);
        }
    },
    created() {
        this.fetchData();
    },
    mounted() {
        this.mapHeight = getHeight(true) - 240;
    },
    methods: {
        fetchData() {
            let parmas = {
                pageNum: this.mergerRuleForm.pageNum,
                pageSize: this.mergerRuleForm.pageSize
            };
            getThrottlingList(this.mergerRuleForm, parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.tableList = res.data.records;
                        this.totalNum = res.data.total;
                    }
                    this.loading = false;
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        onEdit(row) {
            if (row && row.id) {
                this.$router.push({
                    path: "/service/serviceMonitor/throttlingList/createRule",
                    query: { id: row.id }
                });
            }
        },
        onCreate() {
            this.$router.push(
                "/service/serviceMonitor/throttlingList/createRule"
            );
        },
        batchSuspension() {},
        batchOpen() {},
        handleSelectionChange(selection) {
            this.selectionList = selection;
        },
        onChangeSingleStatus(data) {
            editLimitingStatus({
                limitingIds: [data.id],
                status: data.status === 1 ? 0 : 1
            })
                .then(res => {
                    if (res.code === 200) {
                        this.$message.success("修改成功");
                        this.fetchData();
                    }
                })
                .catch(err => {})
                .finally(() => {});
        },
        confirmChangeSingleStatus(data) {
            this.onChangeSingleStatus(data);
        },
        onChangeMutiStatus(isOpen = false) {
            let limitingIds = this.selectionList.map(item => item.id);
            if (limitingIds.length === 0) {
                this.$message.warning("请选择规则");
                return;
            }
            editLimitingStatus({
                limitingIds,
                status: isOpen === true ? 1 : 0
            })
                .then(res => {
                    if (res.code === 200) {
                        this.$message.success("修改成功");
                        this.selectionList = [];
                        this.fetchData();
                    }
                })
                .catch(err => {})
                .finally(() => {});
        },
        confirmChangeMutiStatus(isOpen = false) {
            this.onChangeMutiStatus(isOpen);
        },
        onApiNum(row) {
            // console.log("row:", row);
            this.$refs.ApiNumModalRef.show(row.id);
        }
    }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/system/tree.scss";

.tree-title {
    height: 30px;
    line-height: 30px;
}
.apiNum {
    cursor: pointer;
}
</style>
